import React, {useEffect, useState} from 'react';
import styles from './index.module.scss'
import { Avatar, Card, Input, Select, Button, Radio, DatePicker, Table } from 'antd';
import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
// import {request} from "ice";
// import { history } from 'ice';
const { Search } = Input;
const { Meta } = Card;
const Page = () => {
  const [data, setData] = useState<any>([]);
  useEffect(() => {

    // getChartData();
  }, []);

  // const getChartData = async () => {
  //   let url = '/api/layout/list'
  //   const res: any = await request({
  //     url,
  //     method: 'get',
  //     instanceName: 'layout_config',
  //   });
  //   // if (res && res.code === '200') {
  //   //   const {data} = res;
  //   //   if (data.result) {
  //   //     console.log(data.result)
  //   //     setDdPieSource({sourceList: data.result, isRate: true});
  //   //   }
  //   // } else {
  //   //   setDdPieSource([]);
  //   // }
  //   setData(res)
  // }

  const createPage = () => {
    // history.push('/publishPage');
    localStorage.setItem('id','')

    // console.log(1)

    // const res: any = await request({
    //   url: '/api/publish-layout',
    //   method: 'POST',
    //   instanceName: 'layout_config',
    //   data: {layout: layoutData},
    // });
    // // if (res && res.code === '200') {
    // //   const {data} = res;
    // //   if (data.result) {
    // //     console.log(data.result)
    // setAccessUrl('http://localhost:11000/index/accessPage/'+ res.accessUrl);
    // //   }
    // // } else {
    // //   setDdPieSource([]);
    // // }
  };

  const editPage = (item: any) => {
    console.log(item.layout,'layout')
    // history.push('/publishPage');
    localStorage.setItem('id',item.id)
    localStorage.setItem('layout',JSON.stringify(item.layout))
  };

  return (
    <div className={styles.listPage}>
      <div className={styles.top}>
        <div className={styles.search}>
          <Search/>
        </div>
        <div className={styles.button}>
          <Button type={'primary'} onClick={()=>createPage()}>新建</Button>
        </div>
      </div>
      <div className={styles.bottom}>
        {data.map(item=>{
          return (
            <Card
              className={styles.card}
              onClick={()=>editPage(item)}
              cover={
                <img
                  alt="example"
                  src={item.image}
                />
              }
              // actions={[
              //   <SettingOutlined key="setting" />,
              //   <EditOutlined key="edit" />,
              //   <EllipsisOutlined key="ellipsis" />,
              // ]}
            >
              <Meta
                // avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
                title={'标题'}
                // description="This is the description"
              />
            </Card>
          )
        })
        }

      </div>
    </div>
  );
};

export default Page;
